<template>
  <div style="margin-top:-18px">
    <a-card :bordered="false">

      <!-- //页面总报表 -->
      <div style="margin: 5px 10px">
        <div style="height:40px"></div>
        <a-range-picker @change="onChangePicker" :default-value="[moment(startTime, dateFormat), moment(endTime, dateFormat)]" :format="dateFormat" />
        <a-button type="primary" icon="search" style="margin:  10px 0 10px 10px" @click="searchFirst()">查询</a-button>
        <a-button type="primary" icon="export" style="margin:  10px 0 10px 10px" @click="downloadKpi()">excel导出</a-button>
        <!-- kpi表格 -->
        <a-table :pagination="false" :loading='firstLoading' :columns="columnstableFirst" :data-source="dataFirst" bordered size="middle" />
      </div>

    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { getAnalysisEmos, exportExcelProblemExport, getProblemTotal } from '@/api/public'
import Util from 'mockjs2'
import { getNowTime, getNowFormatDate } from '@/utils/util.js'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'
export default {
  name: 'TableList',
  components: {},
  props: ['tableInfo'],
  data() {
    return {
      qingdanlist: [],
      firstLoading: false,
      secondLoading: false,
      startTime: '',
      endTime: '',
      dateFormat: 'YYYY-MM-DD',
      fileList: '',
      analisyType: true,
      analisyTypea: false,
      analisyTypeb: false,
      linshiId: '', //记录修改得某行清单id
      isShow: true,
      readDetailInfo: false, //二级页面（一级详情）
      daochuIs: false,
      headers: {
        // Source: 'gmpcexcelupload', //
        authorization: Vue.ls.get('ACCESS_TOKEN'),
      },
      columnstableERJI,
      columnstable,
      columnstableKAITONG, //KT
      columnstableFirst,
      columnstableFirstNext,
      columnstableSecond,
      dataFirst: [],
      dataFirstNext: [],
      dataSecond: [],
      dataKAITONG: [],
      searchData: [],
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return getServiceList(requestParameters).then((res) => {
          return res.result
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      uidList: [],
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      current: 1,
      pageSize: 10,
    }
  },
  filters: {},
  created() {
    this.startTime = getNowFormatDate() + ' 00:00:00'
    this.endTime = getNowFormatDate() + ' 23:59:59'
  },
  computed: {},
  mounted() {
    this.getFirstData()
  },
  methods: {
    moment,
    //查询
    searchFirst() {
      this.getFirstData()
    },
    ////获取kpi清单
    getFirstData() {
      this.firstLoading = true
      getProblemTotal(this.startTime,this.endTime)
        .then((response) => {
          this.dataFirst = this.setListId(response.data)
          this.firstLoading = false
        })
        .catch((error) => {
          this.firstLoading = false
        })
    },
    //设置id 
    setListId(arr) {
      arr.forEach((item, index) => {
        arr[index].key = index + 1
      })
      return arr
    },
    //kpi分页
    pageShow(pagination) {
      this.firstLoading = true
      getAnalysisEmos(this.startTime, this.endTime, pagination.current, pagination.pageSize)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataFirst = response.data.records
          this.firstLoading = false
        })
        .catch((error) => {
          this.firstLoading = false
        })
    },

    //时间选择
    onChangePicker(date, dateString) {
      this.startTime = dateString[0] + ' 00:00:00'
      this.endTime = dateString[1] + ' 23:59:59'
    },

    //kpi导出
    downloadKpi() {
      let startTime = this.startTime
      let endTime = this.endTime
      exportExcelProblemExport(startTime, endTime)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', 'kpi表格.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },

    handleOk() {},
  },
}

const columnstableKAITONG = []
const columnstable = []
const columnstableERJI = []
const columnstableFirstNext = []
const columnstableSecond = []
// kpi表头
const columnstableFirst = [
  {
    title: '第四季度KPI',
    align: 'center',
    children: [
      {
        title: '序号',
        dataIndex: 'key',
        width: 100,
        align: 'center',
      },
      {
        title: '区县',
        dataIndex: 'area',
        width: 100,
        align: 'center',
      },
      {
        title: '专线故障处理及时率（挑战值99%/基准值96%）',
        align: 'center',
        children: [
          {
            title: '工单量',
            dataIndex: 'specialLineNum',
            width: 100,
            align: 'center',
          },
          {
            title: '超时量',
            dataIndex: 'specialLineOverNum',
            width: 100,
            align: 'center',
          },
          {
            title: '及时率',
            dataIndex: 'specialLine',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '专线故障率（挑战值4%/基准值6%）',
        align: 'center',
        children: [
          {
            title: '影响专线数',
            dataIndex: 'lineFaultOverNum',
            width: 100,
            align: 'center',
          },
          {
            title: '总数',
            dataIndex: 'lineFaultNum',
            width: 100,
            align: 'center',
          },
          {
            title: '专线故障率',
            dataIndex: 'lineFault',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '重要专线故障处理及时率（挑战值99%/基准值96%）',
        align: 'center',
        children: [
          {
            title: '工单量',
            dataIndex: 'majorSpecialLineNum',
            width: 100,
            align: 'center',
          },
          {
            title: '超时量',
            dataIndex: 'majorSpecialLineOverNum',
            width: 100,
            align: 'center',
          },
          {
            title: '及时率',
            dataIndex: 'majorSpecialLine',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '重要专线可用率（99.99%）',
        dataIndex: 'majorLineFault',
        width: 100,
        align: 'center',
      },
      {
        title: '政企投诉处理及时率',
        align: 'center',
        children: [
          {
            title: '总投诉工单量',
            dataIndex: 'zqNum',
            width: 100,
            align: 'center',
          },
          {
            title: '专线投诉超时工单量',
            dataIndex: 'zxOverNum',
            width: 100,
            align: 'center',
          },
          {
            title: '企宽投诉超时工单量',
            dataIndex: 'qkOverNum',
            width: 100,
            align: 'center',
          },
          {
            title: '绿通投诉超时',
            dataIndex: 'ltOverNum',
            width: 100,
            align: 'center',
          },
          {
            title: '政企投诉故障处理及时率',
            dataIndex: 'zq',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '万投比',
        align: 'center',
        children: [
          {
            title: '专线万投比',
            dataIndex: 'wtzxRatio',
            width: 100,
            align: 'center',
          },
          {
            title: '企宽万投比',
            dataIndex: 'wtqkRatio',
            width: 100,
            align: 'center',
          },
          {
            title: '政企万投比',
            dataIndex: 'wtzqRatio',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '政企投诉回访满意度',
        align: 'center',
        children: [
          {
            title: '满意',
            dataIndex: 'zqSatisfiedNum',
            width: 100,
            align: 'center',
          },
          {
            title: '专线投诉不满意',
            dataIndex: 'zxDissatisfied',
            width: 100,
            align: 'center',
          },
          {
            title: '企宽投诉不满意',
            dataIndex: 'qkDissatisfied',
            width: 100,
            align: 'center',
          },
          {
            title: '政企投诉回访满意度',
            dataIndex: 'zqSatisfaction',
            width: 100,
            align: 'center',
          },
        ],
      },
    ],
  },
]
</script>
